<%@page import="com.dd.shop4j.order.utils.enums.OrderStatus"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<title>商品列表</title>
<%@ include file="../../../common/admin_taglib.jsp" %>
<script type="text/javascript">
$(function(){
	$(".orderNo").each(function(i,t){
		var data = eval("(" + $(t).attr("data") + ")");
		$(t).popover({
			trigger:"hover",
			title:"订单号：" + $(t).text() + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;下单时间：" + data.addTime,
			template: '<div class="popover" style="width:600px;"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>',
			content:$("#detail_"+data.id).html()
		});
	});
});
</script>
</head>
<body>

<h1 class="page-title">Shop4j 管理中心</h1>
<ul class="breadcrumb">
	 <li><a href="${ctx}/admin/main">管理中心</a><span class="divider">/</span></li>
     <li class="active">订单列表</li>
</ul>

<div class="row-fluid">
	<div class="btn-toolbar">
	    <button class="btn">导出</button>
	  	<div class="btn-group"></div>
	</div>
	<div class="block">
		<div class="block-heading">
            <span class="block-icon pull-right">
                <a href="#widget2container" data-toggle="collapse">
                	<i class="icon-chevron-down"></i>
                </a>
            </span>
            <a>订单查询</a>
        </div>
        <div id="widget2container" class="block-body collapse in">
        	<form:form id="search_form" cssClass="form-horizontal" method="post" commandName="order">
	        	<table width="100%">
	        		<tr>
	        			<td>订单号</td>
	        			<td>
	        				<form:input path="code" cssClass="input-xlarge" placeholder="请输入文字..."/>
	        			</td>
	        			<td>订单状态</td>
	        			<td>
	        				<form:select path="status">
	        					<form:option value="">-请选择-</form:option>
	        					<% pageContext.setAttribute("ss", OrderStatus.values()); %>
	        					<c:forEach items="${ss}" var="s">
	        						<form:option value="${s.code}">${s.text}</form:option>
	        					</c:forEach>
	        				</form:select>
	        			</td>
	        		</tr>
	        		<tr>
	        			<td>下单会员</td> 
	        			<td>
	        				<form:input path="memberUsername" cssClass="input-xlarge" placeholder="请输入文字..."/>
	        			</td>
	        			<td>订单总价</td>
	        			<td>
	        				<div class="input-prepend input-append">
		        				<span class="add-on">$</span>
		        				<form:input path="priceBegin" cssClass="input-small easyui-numberbox" placeholder="请输入数字..."/>
		        				<span class="add-on">.00</span>
	        				</div>
	        				~
	        				<div class="input-prepend input-append">
		        				<span class="add-on">$</span>
		        				<form:input path="priceEnd" cssClass="input-small easyui-numberbox" placeholder="请输入数字..."/>
		        				<span class="add-on">.00</span>
	        				</div>
	        			</td>
	        		</tr>
	        		<tr>
	        			<td>下单时间</td>
	        			<td colspan="2">
	        				<form:input path="addBegin" id="addBeginTime" placeholder="请输入日期..." onfocus="WdatePicker({doubleCalendar:true,dateFmt:'yyyy-MM-dd',maxDate:$('#addEndTime').val()})" cssClass="input-small"/>
	        				<form:input path="addEnd" id="addEndTime" placeholder="请输入日期..." onfocus="WdatePicker({doubleCalendar:true,dateFmt:'yyyy-MM-dd',minDate:$('#addBeginTime').val()})" cssClass="input-small"/>
	        			</td>
	        			<td align="right">
	        				<button type="submit" class="btn btn-info">
	        					<i class="icon-search"></i>
	        					搜索
	        				</button>
	        			</td>
	        		</tr>
	        	</table>
	        </form:form>
        </div>
	</div>
	
	<div class="well">
		<table class="table">
			<thead>
		    	<tr>
		    		<td>#编号</td>
		    		<td>订单号</td>
		    		<td>下单时间</td>
		    		<td>订单总价</td>
		    		<td>交易金额</td>
		    		<td>订单状态</td>
		    		<td>联系信息</td>
		    		<td>操作</td>
		        </tr>
		     </thead>
		     <tbody>
		     	<c:forEach items="${page.entities}" var="o">
		     	<tr>
		     		<td>${o.id}</td>
		     		<td>
		     			<a class="orderNo" data="{id:${o.id}, addTime:'<fmt:formatDate value="${o.addTime}" pattern="yyyy-MM-dd HH:mm:ss"/>'}" href="javascript:void(0);">${o.code}</a>
		     			<div id="detail_${o.id}" style="display:none;">
		     				<table width="100%">
		     					<tr>
		     						<th width="20%" align="left">图片</th>
		     						<th width="30%" align="left">商品名称</th>
		     						<th width="10%" align="left">商品价格</th>
		     						<th width="10%" align="left">交易价格</th>
		     						<th width="10%" align="left">数量</th>
		     					</tr>
		     					<c:forEach items="${o.details}" var="d">
		     					<tr>
		     						<td>
		     							<dd:image url="${d.good.srcImg}" width="80px" height="80px"></dd:image>
		     						</td>
		     						<td>${d.good.name}</td>
		     						<td>￥ ${d.price}</td>
		     						<td>￥ ${d.salePrice}</td>
		     						<td>x ${d.number}</td>
		     					</tr>
		     					</c:forEach>
		     				</table>
		     			</div>
		     		</td>
		     		<td><fmt:formatDate value="${o.addTime}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
		     		<td>${o.price}</td>
		     		<td>${o.salePrice}</td>
		     		<td>${o.status}</td>
		     		<td>
		     			联系人：${o.contactsName} &nbsp;&nbsp;&nbsp;
		     			联系电话：${o.contactsTelphone} <br />
		     			配送地址：${o.address}
		     		</td>
		     		<td>
		     			<a href="${ctx}/admin/order/detail" class="btn btn-small">订单详情</a>
		     		</td>
		     	</tr>
		     	</c:forEach>
		     </tbody>
		</table>
	</div>
	<dd:pagination count="${page.count}" page="${page.page}" curpage="${page.curpage}"></dd:pagination>
</div>

</body>
</html>
